<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>22_重复渐变</title>
<!--    重复渐变是建立在已经发生渐变的基础之上
        只有当已经发生渐变的元素上出现有纯色区域(未发生渐变区域)时,重复渐变才起效果

        repeating-linear/radial-gradient()
-->
    <style>
        div{

            width: 300px;
            height: 200px;
            border: 1px black solid;
            float: left;
            margin: 10px;
        }
        .box1{
            /*不存在没有发生渐变的区域,加入重复渐变不起效果*/
            background-image: repeating-linear-gradient(red,yellow,green);
        }
        .box2{
            background-image: linear-gradient(to right,red,yellow,green);
        }
        .box3{
            background-image: linear-gradient(to left,red,yellow,green);
        }
        .box4{

            background-image: linear-gradient(0deg,red,yellow,green);
        }
        .box5{
            /*有纯色区域,加上重复渐变起效果*/
            background-image: repeating-linear-gradient(red 50px,yellow 100px,green 150px);
        }
        .box6{
            /*有纯色区域,加上重复渐变起效果*/
            background-image: repeating-linear-gradient(20deg,red 50px,yellow 100px,green 150px);
            font-size: 60px;
            text-align: center;
            font-weight: bolder;
            color: transparent;
            background-clip: text;
        }
    </style>
    </head>

<body>
<div class="box1">默认情况下,从上到下</div>
<div class="box2">使用to right,从左到右</div>
<div class="box3">使用to left,从右到左</div>
<div class="box4">任意角度</div>
<div class="box5">渐变位置</div>
<div class="box6">任意角度加渐变位置</div>
</body>
</html>